<template>
	<view class="content">
		<!-- 表单 -->
		<u-form :model="form" ref="uForm" class="form-content" label-width="130" :error-type="errorType" :rules="rules">
			<u-form-item label="手机号" prop="tel"><u-input v-model="form.tel" placeholder="输入手机号" type="number" :placeholder-style="placeholderStyle" /></u-form-item>
			<u-form-item label="验证码" prop="code">
				<u-input v-model="form.code" placeholder="请填写验证码" type="number" :placeholder-style="placeholderStyle" />
				<u-button size="mini" slot="right" plain shape="circle" :disabled="againTime > 0" :loading="loading" type="error" @click="handleAgain">{{ codeText }}</u-button>
			</u-form-item>
		</u-form>
		<u-button shape="circle" :ripple="true" :disabled="!canHandle" :class="{ active: canHandle }" class="default-login" @click="handleConfirm">下一步</u-button>

		<bottom :third-party="false">
			<view class="wel-txt" >
				注册代表你已经同意
				<text class="red">《注册协议》</text>
				和
				<text class="red">《隐私政策》</text>
			</view>
		</bottom>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
import Bottom from './components/bottom.vue';
import { validator, phone } from '@/utils/rules.js';

export default {
	components: {
		Bottom
	},
	data() {
		return {
			loading: false,
			againTime: 0,
			time: null,
			placeholderStyle: 'color:#A8A8A8;',
			codeText: '获取验证码',
			form: {
				tel: '',
				code: ''
			},
			errorType: ['border', 'message'],
			rules: {
				tel: [
					{
						required: true,
						message: '请输入手机号'
						// 可以单个或者同时写两个触发验证方式
					},
					{
						validator,
						type: 'phone',
						trigger: ['blur'],
						message: '请输入正确的手机号码'
					}
				],
				code: [
					{
						required: true,
						message: '请输入验证码'
					}
				]
			}
		};
	},
	computed: {
		canHandle() {
			const { tel } = this.form;
			return tel !== '';
		}
	},
	methods: {
		handleConfirm() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					// 跳转兴趣设置页面
					this.navigateTo({
						url: 'others/interest'
					});
				}
			});
		},
		handleAgain() {
			if (this.againTime <= 0) {
				// 手机号输入正确
				if (phone.test(this.form.tel)) {
					this.getCode();
				}
			}
		},
		resetAgainTime() {
			this.againTime = 60;
			this.time = setInterval(() => {
				this.againTime--;
				this.codeText = `重新获取(${this.againTime}s)`;
				if (this.againTime <= 0) {
					this._clearInterval();
				}
			}, 1000);
		},
		_clearInterval() {
			console.log(2222222222, this.time);
			this.codeText = '获取验证码';
			clearInterval(this.time);
			this.time = null;
		},
		// 获取验证码
		async getCode() {
			// 重启倒计时
			this.resetAgainTime();
			const result = await this.$api.sendMemberCodeSMS({
				mobile: this.form.tel,
				template: this.pageType
			});
			if (result?.resultCode === '200') {
				this.$refs.uToast.show({
					title: result?.resultMsg ?? '验证码发送成功',
					type: 'success',
					duration: 2000
				});
			} else {
				// 发送失败 重置倒计时定时器
				this.againTime = 0;
				this._clearInterval();
				this.$refs.uToast.show({
					title: result?.resultMsg ?? '"验证码发送失败"',
					type: 'error',
					duration: 2000
				});
			}
		}
	},
	onLoad(opts) {},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	// 销毁页面时 清除定时器
	onUnload() {
		this._clearInterval();
	}
};
</script>

<style lang="scss">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 40rpx 30rpx;

	.default-login {
		margin-top: 90rpx;
		color: #fff;
		background: linear-gradient(90deg, rgba(254, 97, 79, 0.5) 0%, rgba(235, 77, 60, 0.5) 100%);
		width: 100%;

		&.active {
			background: linear-gradient(90deg, rgba(254, 97, 79, 1) 0%, rgba(235, 77, 60, 1) 100%);
		}
	}

	/deep/ uni-button[loading]:before {
		width: 44rpx;
		height: 44rpx;
	}

	/deep/ .u-btn--default--disabled {
		border-color: transparent !important;
		color: #fff !important;
	}
}

.form-content {
	width: 100%;

	/deep/ .u-form-item {
		&--left {
			position: relative;

			&::after {
				content: ' ';
				display: block;
				width: 1rpx;
				background-color: $uni-border-color;
				height: 48rpx;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		&--right {
			padding-left: 20rpx;
		}
	}
	/deep/ .u-size-mini {
		min-width: 140rpx;
	}
}

.wel-txt {
	font-size: 22rpx;
	text-align: center;
	width: 100%;
	margin: 14rpx 0;
	color: $font-color-grey;

	.red {
		color: $font-color-red;
		margin-left: 6rpx;
	}
}
</style>
